<template>
	<div class="AdministratorInterface">
		<HeaderTab>
			<div slot="left">
				<router-link to="/mine" class="glyphicon glyphicon-menu-left return_but"></router-link>
			</div>
			<div slot="center" class="header_center">
				管理员审核界面
			</div>
		</HeaderTab>
		<div class="NavigationTab">
			<ul>
				<li class="active_Tab">
					<router-link to="/administratorInterface">原创作品管理</router-link>
				</li>
				<li>
					<router-link to="/administrationComment">作品评论管理</router-link>
				</li>
			</ul>
		</div>
		<div class="Admintable_box table-responsive">
			<table class="Admintable_table">
				<thead>
					<tr>
						<th>作品名称</th>
						<th>作者</th>
						<th>章节数</th>
						<th>查看作品</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(i,k) in table_data" :key="k">
						<td data-label="作品名称：">{{i.book_name}}</td>
						<td data-label="作者：">{{i.author}}</td>
						<td data-label="章节数：">{{i.chapter_num}}</td>
						<td data-label="查看作品：">
							<button type="button" class="btn btn-warning" @click="check_itemclick(i,k)">查看作品</button>
						</td>
						<td data-label="操作：">
							<button type="button" class="btn btn-success" @click.prevent="adopt(i,k)">批准通过</button>
							<button type="button" class="btn btn-danger" @click.prevent="refuse(i,k)">拒绝通过</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="AdministratorInterface_tip">---------------------已经到底了---------------------</div>
		<div class="mask" v-if="bol" @click="close">
			<div class="box" @click.stop="">
				<h1 class="glyphicon glyphicon-ok"></h1>
				<p class="mask_tip">{{mask_tip}}</p>
			</div>
		</div>
		<div class="merk" v-if="bel" @click="clese">
			<div class="bex" @click.stop="">
				<h1 class="glyphicon glyphicon-remove"></h1>
				<p class="merk_tip">审核成功</p>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'

	export default {
		name: 'AdministratorInterface',
		components: {
			HeaderTab
		},
		data() {
			return {
				table_data: [],
				bol: false,
				bel: false,
				tip: '',
				new_bookid: ''
			}
		},
		methods: {

			// 模态框1关闭事件
			close() {
				this.bol = !this.bol;
			},

			// 模态框2关闭事件
			clese() {
				this.bel = !this.bel;
			},

			//审核通过按钮实现
			adopt(i, k) {
				this.table_data.splice(k, 1);
				this.axios.get('http://192.168.43.169/api/nodealOriginals_ApprovalAdopt', {
					params: {
						book_name: i.book_name,
						author: i.author,
						special_area: i.special_area,
						book_type: i.book_type,
						introduce: i.introduce,
						bookid: i.bookid
					},
				}).then((response) => {
					console.log(response.data[1])
					this.new_bookid = response.data[0]
					console.log(this.new_bookid)
					let chapter_arr = response.data[1]
					for (let i = 0; i < chapter_arr.length; i++) {
						this.axios.get('http://192.168.43.169/api/nodealChapter_del', {
							params: {
								chapter_path: chapter_arr[i].chapter_path,
								chapter_title: chapter_arr[i].chapter_title,
								book_id: this.new_bookid,
								id: chapter_arr[i].id
							},
						}).then((response) => {
							let chapter_arr = response.data
							for (let i = 0; i < chapter_arr.length; i++) {
								this.tip = response.data;
							}
							let _self = this;
							_self.bol = true;
							_self.mask_tip = response.data;
							// 设置一定时间后关闭提醒框
							if (_self.bol) {
								setTimeout(function() {
									_self.bol = false;
									_self.$router.go(0); //设置页面自动刷新
								}, 2000);
							}
						});
					}
				});
			},

			//审核拒绝按钮实现
			refuse(i, k) {
				this.table_data.splice(k, 1);
				this.axios.get('http://192.168.43.169/api/nodealOriginals_ApprovalRefuse', {
					params: {
						bookid: i.bookid,
						author: i.author
					},
				}).then((response) => {
					let _self = this;
					_self.bol = true;
					_self.mask_tip = response.data;
					// 设置一定时间后关闭提醒框
					if (_self.bol) {
						setTimeout(function() {
							_self.bol = false;
							_self.$router.go(0); //设置页面自动刷新
						}, 2000);
					}
				});
			},

			// 查看按钮功能实现
			check_itemclick(i, k) {
				//方式1，可以用动态路由方式
				// query方式拼接路由
				this.$router.push('/nodealdetailPage/' + i.bookid);
			}
		},
		created() {
			this.axios.get('http://192.168.43.169/api/nodealOriginals').then((response) => {
				if (response.data.code == 200) {
					let arr_data = response.data.data;
					for (let i = 0; i < arr_data.length; i++) {
						let arr = {
							book_name: '',
							author: '',
							chapter_num: '',
							special_area: '',
							book_type: '',
							introduce: '',
							bookid: ''
						}
						arr.book_name = arr_data[i].book_name;
						arr.author = arr_data[i].author;
						arr.special_area = arr_data[i].special_area;
						arr.book_type = arr_data[i].book_type;
						arr.introduce = arr_data[i].introduce;
						arr.bookid = arr_data[i].id;
						// 根据书籍id获取对应章节个数
						this.axios.get('http://192.168.43.169/api/nodealOriginals_chapter/' + arr_data[i].id).then((res) => {
							if (res.data.code == 200) {
								arr.chapter_num = res.data.data.length
							}
						});
						this.table_data.push(arr)
					}
				}
			})
		},
	}
</script>

<style>
	@import '~assets/css/AdministratorInterface.css';
	@import '~assets/css/mask.css';
</style>
